<template>
  <el-drawer
    :append-to-body="true"
    v-model="conditionDrawer"
    class="condition_copyer"
    direction="rtl"
    size="550px"
    :title="$t('workflow.flowDesign.branchSetting')"
  >
    <div class="demo-drawer__content">
      <div class="condition_content">
        <div
          v-for="(cond, index) in conditionList"
          :key="`conditionList` + index"
          class="condition_list mb10"
        >
          <span class="desc-text mt5">
            {{ index != 0 ? $t("workflow.flowDesign.or") : "" }}
          </span>
          <el-icon
            class="text-danger el-icon-circle-close"
            @click="conditionList.splice(index, 1)"
          >
            <ele-CircleClose />
          </el-icon>
          <el-row
            v-for="(subCond, subIndex) in cond.subConditionList"
            :key="`subConditionList` + subIndex"
            :gutter="10"
            align="middle"
            class="p10 mb5"
            type="flex"
          >
            <el-col :span="6">
              <el-select
                v-model="subCond.field"
                :placeholder="$t('workflow.flowDesign.choose')"
              >
                <el-option
                  v-for="item in conditionFormFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                v-model="subCond.op"
                :placeholder="$t('workflow.flowDesign.choose')"
              >
                <el-option
                  v-for="item in opList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="8">
              <FormOptionSelect
                class="width100"
                v-model="subCond.value"
                v-if="isSelectType(subCond.field)"
                clearable
                filterable
                :item="getFormItem(subCond.field)"
              ></FormOptionSelect>
              <el-input
                v-else
                v-model="subCond.value"
                :placeholder="$t('formI18n.all.pleaseEnter')"
              />
            </el-col>
            <el-col :span="4">
              <el-icon
                class="icon text-success"
                @click="handleAddCondition(cond.subConditionList)"
              >
                <ele-Plus />
              </el-icon>
              <el-icon
                class="icon text-danger"
                @click="cond.subConditionList.splice(subIndex, 1)"
              >
                <ele-Delete />
              </el-icon>
            </el-col>
          </el-row>
        </div>
        <el-button
          class="width-full"
          icon="ele-Plus"
          @click="handleAddConditionList"
        >
          {{ $t("workflow.flowDesign.addBranch") }}
        </el-button>
      </div>
    </div>
    <template #footer>
      <div class="mb20 mr20">
        <el-button
          size="default"
          @click="closeDrawer"
        >
          {{ $t("formI18n.all.cancel") }}
        </el-button>
        <el-button
          size="default"
          type="primary"
          @click="saveCondition"
        >
          {{ $t("formI18n.all.confirm") }}
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup name="ConditionDrawer">
import { ref, watch, computed } from "vue";
import { useFormWorkflow } from "@/stores/formWorkflow";
import { i18n } from "@/i18n";
import FormOptionSelect from "@/views/components/FormOptionSelect/index.vue";
import { isLabelTag } from "@/views/formgen/components/GenerateForm/FormItemLabel";
import { storeToRefs } from "pinia";

const formWorkflowStore = useFormWorkflow();

const { conditionsConfig: conditionsConfig1, conditionDrawer, formFields } = storeToRefs(formWorkflowStore);

const conditionsConfig = ref<Record<string, any>>({});
const branchNode = ref<Record<string, any>>({});
const index = ref(0);
const conditionList = ref([
  {
    subConditionList: [
      {
        field: null
      }
    ]
  }
]);
const opList = [
  { value: "eq", label: i18n.global.t("form.setting.equalsLabel") },
  { value: "ne", label: i18n.global.t("form.setting.notEqualsLabel") },
  { value: "gt", label: i18n.global.t("form.setting.greaterThanLabel") },
  { value: "ge", label: i18n.global.t("form.setting.greaterThanOrEqualsLabel") },
  { value: "lt", label: i18n.global.t("form.setting.lessThanLabel") },
  { value: "le", label: i18n.global.t("form.setting.lessThanOrEqualsLabel") },
  { value: "like", label: i18n.global.t("form.setting.containsLabel") },
  { value: "noLike", label: i18n.global.t("form.setting.notContainsLabel") }
];

watch(
  conditionsConfig1,
  val => {
    if (!val) return;
    conditionsConfig.value = val.value;
    index.value = val.index;
    branchNode.value = val.index !== undefined ? conditionsConfig.value.branchNodes[val.index] : { conditionList: [] };
    if (branchNode.value.conditionList) {
      conditionList.value = branchNode.value.conditionList;
    }
  },
  { deep: true, immediate: true }
);

const saveCondition = () => {
  conditionsConfig.value.branchNodes[index.value].conditionList = conditionList.value;
  formWorkflowStore.updateCondition();
  formWorkflowStore.updateConditionsConfig({
    value: conditionsConfig.value,
    flag: true,
    id: conditionsConfig1.value.id
  });
};

const handleAddConditionList = () => {
  conditionList.value.push({
    subConditionList: [
      {
        field: null
      }
    ]
  });
};

const handleAddCondition = (subConditionList: any[]) => {
  subConditionList.push({
    field: null,
    op: null
  });
};

const closeDrawer = () => {
  formWorkflowStore.updateCondition();
};

const getFormItem = (formItemId: string) => {
  const item = formFields.value.find(item => item.value === formItemId);
  return item ? { field: item } : {};
};

const isSelectType = (formItemId: string | null) => {
  if (!formItemId) return false;
  return isLabelTag(formItemId);
};

const conditionFormFields = computed(() => {
  return formFields.value.filter((item: any) =>
    ["INPUT", "NUMBER", "TEXTAREA", "SELECT", "SLIDER", "RADIO", "CHECKBOX", "DATE", "RATE"].includes(item.type)
  );
});
</script>

<style lang="scss">
.condition_copyer {
  .condition_content {
    padding: 20px 20px 0;
    height: 90%;
  }
}

.desc-text {
  color: #606266;
  margin-top: 10px;
  font-size: 15px;
}

.condition_list {
  padding: 10px;
  position: relative;
  background-color: #f2f3f4;

  &:hover {
    .el-icon-circle-close {
      display: inline-block;
    }
  }

  .icon {
    font-size: 16px;
    margin-right: 5px;
  }

  .el-icon-circle-close {
    position: absolute;
    right: 5px;
    top: 3px;
    z-index: 1;
    display: none;
  }
}
</style>
